<template>
  <main class="scroll-container">
    <section class="sec-box fixed-top h-screen about-mini-animte"></section>
    <section id="aboutMission" class="sec-box bg-black fixed-top flex-ec min-h-screen about-mini">
      <section>
        <article class="margin-right-hight fsLevel3 wow fadeInDown">
          Imagine a world where real-time, high-resolution imaging of dynamic bodily functions—like blood flow, neural activity, or organ performance—is
          accessible anywhere, from bustling hospitals to remote clinics. This is the promise of Functional Ultrasound (fUS), a revolutionary leap beyond
          traditional imaging that’s redefining precision, portability, and patient care.
        </article>
        <article class="margin-right-hight fsLevel3 wow fadeInDown">
          <span>Founded in 2019 by a team of neuroscience experts, Thunders Biotech was established.</span>
          <span class="ib margin-top">
            We are committed to democratizing functional ultrasound (fUS) imaging, making high-performance systems accessible to a broader range of researchers.
            By overcoming the traditional barriers of cost, complexity, and size, we aim to empower laboratories worldwide to conduct groundbreaking research
            into brain function, behavior, and neurological disorders. We believe in advancing fundamental neuroscience and pioneering next-generation BCI
            technologies that can profoundly improve human health and understanding.
          </span>
        </article>
      </section>
      <div class="animte-banner"></div>
    </section>
    <section id="aboutLeadership" class="about-leadership">
      <div>
        <h1 class="title">Leadership</h1>
        <ul class="list-box clearfloat">
          <li>
            <img :src="imgDefault" />
            <article>redefining precision, portability, and patient care.</article>
          </li>
          <li>
            <img :src="imgDefault" />
            <article>redefining precision, portability, and patient care.</article>
          </li>
          <li>
            <img :src="imgDefault" />
            <article>redefining precision, portability, and patient care.</article>
          </li>
          <li>
            <img :src="imgDefault" />
            <article>redefining precision, portability, and patient care.</article>
          </li>
          <li>
            <img :src="imgDefault" />
            <article>redefining precision, portability, and patient care.</article>
          </li>
          <li>
            <img :src="imgDefault" />
            <article>redefining precision, portability, and patient care.</article>
          </li>
          <li>
            <img :src="imgDefault" />
            <article>redefining precision, portability, and patient care.</article>
          </li>
        </ul>
      </div>
    </section>
  </main>
</template>
<script>
import imgDefault from '@images/logo.png'

export default {
  name: 'aboutPage',
  data() {
    return {
      imgDefault,
    }
  },
  mounted() {
    new this.$wow.WOW().init()
    if (window.outerWidth > 1000) window.addEventListener('scroll', this.initScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.initScroll)
  },
  methods: {
    initScroll() {
      const scrollTop = parseInt(window.scrollY)
      console.log(scrollTop)
      const animteEl = document.querySelector('.animte-banner')
      if (scrollTop == 0) {
        animteEl.classList.remove('none')
        animteEl.classList.remove('step1')
        animteEl.classList.remove('step2')
        return
      }
      if (scrollTop >= 124 && scrollTop < 300) {
        animteEl.classList.remove('none')
        animteEl.classList.remove('step2')
        animteEl.classList.add('step1')
      } else if (scrollTop >= 300 && scrollTop < 2000) {
        animteEl.classList.remove('none')
        animteEl.classList.remove('step1')
        animteEl.classList.add('step2')
      } else {
        animteEl.classList.add('none')
      }
    },
  },
}
</script>
<style lang="less" scoped>
.about-mini-animte {
  display: none;
  background: @borderColor url('@images/mini-fUS.png') 40% / cover no-repeat;
}

.about-mini {
  padding: 0 1rem;

  & > section {
    width: 45%;

    article {
      margin: 50rem 0;
      padding: 2rem;

      &:first-child {
        margin-top: 120rem + @headerH;
      }
    }
  }

  .animte-banner {
    opacity: 1;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: @borderColor url('@images/mini-fUS.png') 40% / cover no-repeat;
    transition: all 1s;

    &.step1 {
      right: 25%;
      top: 10%;
      bottom: 10%;
    }

    &.step2 {
      right: 50%;
      top: 20%;
      bottom: 20%;
    }

    &.none {
      opacity: 0;
    }
  }
}

.about-leadership {
  z-index: 2;
  position: relative;
  padding: 10rem 2%;
  background: #f2f2f2;
}
.title {
  padding: 0 0 @normal * 2 2%;
}

.list-box {
  padding: 1%;
  li {
    overflow: hidden;
    position: relative;
    float: left;
    margin: 1%;
    width: 22.8%;
    min-height: 30rem;
    background-color: @gray;
    &:hover {
      article {
        bottom: 0;
      }
    }
    img {
      width: 100%;
    }
    article {
      position: absolute;
      bottom: -100%;
      padding: @normal;
      width: 100%;
      background: @basicColor;
      transition: all 0.8s;
    }
  }
}
</style>